<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选练习</title>
</head>

<script type="text/javascript">

    window.onload = function () {
        // 全选按钮
        var checkedAllBtn = document.getElementById("checkedAllBtn");
        checkedAllBtn.onclick = function () {
            var items = document.getElementsByName("items");

            for (var i = 0; i < items.length; i++) {
                items[i].checked = true;
            }
            checkedAllBox.checked = true;
        }

        // 全不选
        var checkedNoBtn = document.getElementById("checkedNoBtn");
        checkedNoBtn.onclick = function () {
            var items = document.getElementsByName("items");

            for (var i = 0; i < items.length; i++) {
                items[i].checked = false;
            }
            checkedAllBox.checked = false;
        }

        // 反选
        var checkedRevBtn = document.getElementById("checkedRevBtn");
        checkedRevBtn.onclick = function () {
            var items = document.getElementsByName("items");

            for (var i = 0; i < items.length; i++) {
                items[i].checked = !items[i].checked;
            }
        }

        // 全选Box
        var checkedAllBox = document.getElementById("checkedAllBox");
        checkedAllBox.onclick = function () {
            var items = document.getElementsByName("items");


            for (var i = 0; i < items.length; i++) {
                if (checkedAllBox.checked)
                    items[i].checked = true;
                else
                    items[i].checked = false;
            }
        }

        // 提交
        var sendBtn = document.getElementById("sendBtn");
        sendBtn.onclick = function () {
            var items = document.getElementsByName("items");
            var checkList = []
            for (var i = 0; i < items.length; i++) {
                if (items[i].checked)
                    checkList.push(items[i].value);
            }
            alert(checkList);
        }

        // items
        var items = document.getElementsByName("items");
        for (var i = 0; i < items.length; i++) {
            
            items[i].onclick = function() {
                checkedAllBox.checked = true;
                for(var j = 0;j < items.length; j++) {
                    if(!items[j].checked) {
                        checkedAllBox.checked = false;
                        break;
                    }
                }
            }
        }

    }

</script>

<body>

    <form method="post" action="">
        你爱好的运动是？
        <input type="checkbox" name="" id="checkedAllBox">全选/全不选

        <br>

        <input type="checkbox" name="items" value="足球" id="">足球
        <input type="checkbox" name="items" value="篮球" id="">篮球
        <input type="checkbox" name="items" value="羽毛球" id="">羽毛球
        <input type="checkbox" name="items" value="乒乓球" id="">乒乓球

        <br>

        <input type="button" value="全 选" id="checkedAllBtn">
        <input type="button" value="全不选" id="checkedNoBtn">
        <input type="button" value="反 选" id="checkedRevBtn">
        <input type="button" value="提 交" id="sendBtn">

    </form>

</body>

</html>